<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css3动画 transform  transiton  animation</title>
	</head>
	<style>
		div{

			margin:200px;
			height: 20px;
			border:1px solid;
			animation: rotate 2.5s infinite , color  2s infinite , width 3s infinite;
			animation-direction: normal,normal,alternate;


			/*height: 10px;
			width: 50px;
			border:1px solid;
			background:linear-gradient(#00f,#0ff);
			background-repeat: no-repeat;*/
			/*background-size: 0;*/
			/*background-color: #0ff;*/
			/*animation:  move 2s  -1s linear forwards ;*/
			/*border-radius: 50%;*/
			/*animation:  move 2s  linear 3 alternate both;*/
			/*animation:  rotate 2s  linear ;	*/
			/*animation-name:rotate;	
			animation-duration: 2s;*/
			/*animation-timing-function: ease-in-out；	*/
			/*animation: name duration timing-function delay iteration-count direction fill-mode;*/
			 
			/*
			
			animation-duration: ;         动画完成一个周期所需要的时间
			animation-timing-function: ;  动画的速度曲线    ease 默认值
			animation-delay: ;			  延迟时间   
			animation-iteration-count: ;  动画播放的次数   1次
			animation-direction: ;		  动画播放的方向   normal 
			animation-fill-mode: ;		  动画的填充模式   none
			animation-play-state: ;		  动画的播放状态   running
			animation-name:;			  动画的名称

			*/
		}


		@keyframes  move{
			/*0%{
				transform: translate(0,0);
			}
			100%{
				transform: translate(200px,0);
			}*/
			100%{
				background-size: 100%;
			}
		}
		

		@keyframes  rotate{
			/*from{
				transform: rotate(0deg);
			}*/
			to{
				transform: rotate(360deg);
			}
		}
		@keyframes  color{
			
			20%{
				background-color: green;
			}
			80%{
				background-color: pink;
			}
		}

		@keyframes  width {
			
		  0% {
		    width: 40%;
		  }
		  100% {
		    width: 70%;
		  }
		}

	</style>
	<body>

		<div></div>
	</body>
	<script type="text/javascript">
		

		
	</script>
</html>
